
<template>
	<div>
		<InputOutputDefine
			:versionId="props.id"
			:stepCode="props.nodeId"
			:topFlag="false"
			:getResource="getResource"
			:inputFlag="true"
		>
		</InputOutputDefine>
		<a-row class="mb-2">
			<a-col span="24">
				<a-tag>表达式:</a-tag>
			</a-col>
		</a-row>
		<a-row class="mb-2">
			<a-col span="24">
				<div ref="groovyContainer" style="width: 100%; height: 150px; text-align: left"></div>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<a-tag>条件:</a-tag>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<ConditionTable
					v-if="props.componentConfig"
					:height="200"
					:tableFieldList="inputDefine.params"
					:values="inputDefine"
					:conditionData="props.componentConfig?.output?.conditionData"
				>
				</ConditionTable>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import ConditionTable from './ConditionTable.vue'
import * as monaco from 'monaco-editor'
import processVersionContentApi from '@/api/process/processVersionContentApi'

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])

const defaultConfig = () => {
	return {
		output: {
			templateStr: null,
			conditionData: []
		}
	}
}
let monacoEditor = null
const groovyContainer = ref()

const inputDefine = ref({})

onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.output = c.output
	}

	initGroovy()
	const c = await getInputDefine()
	inputDefine.value = c
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

const getInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}
const getResource = () => {
	let frontFile = mergeStepConfigToFrontFile(props.frontFile, props.nodeId, props.componentConfig)
	return frontFile
}

const initGroovy = () => {
	monacoEditor = monaco.editor.create(groovyContainer.value, {
		value: '',
		language: 'java',
		theme: 'vs-dark', // 主题
		folding: true, // 是否折叠
		foldingHighlight: true, // 折叠等高线
		foldingStrategy: 'indentation', // 折叠方式  auto | indentation
		showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
		disableLayerHinting: true, // 等宽优化
		emptySelectionClipboard: false, // 空选择剪切板
		selectionClipboard: false, // 选择剪切板
		automaticLayout: true, // 自动布局
		codeLens: false, // 代码镜头
		scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
		colorDecorators: true, // 颜色装饰器
		accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
		lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
		lineNumbersMinChars: 5, // 行号最小字符   number
		enableSplitViewResizing: false,
		readOnly: false //是否只读  取值 true | false
	})
	// 编辑监听
	monacoEditor.onDidChangeModelContent(() => {
		const calue = monacoEditor.getValue()
		props.componentConfig.output.templateStr = calue
	})

	if (props.componentConfig.output.templateStr) {
		monacoEditor.setValue(props.componentConfig.output.templateStr)
	}
}
//现在开始处理
</script>


<style scoped></style>
